<template>
	<view>
		<view style="left: 0%;top: 5%;position: fixed;width: 100vw;height: 15%; z-index: 99;background:#43464a;">
			<uni-search-bar v-model="keyword" @confirm="newSearch" @cancel="cancelSearch"></uni-search-bar>
			<uni-row >
				<uni-col :span="4" :offset="1">
					<view>
					<uni-tag class="tag" :circle="false" text="文体" :inverted=selected[0] type="default" @click="selectType(1)"/>
					</view>
				</uni-col > 	
					
				<uni-col  :span="4" :offset="2">
					<view>
					<uni-tag class="tag" :circle="false" text="竞赛" :inverted=selected[1] type="default" @click="selectType(2)"/>
					</view>
				</uni-col>
				
				<uni-col  :span="4" :offset="2">
					<view>
					<uni-tag class="tag" :circle="false" text="学术" :inverted=selected[2] type="default" @click="selectType(3)"/>
					</view>
				</uni-col>
				
				<uni-col  :span="4" :offset="2">
					<view>
					<uni-tag class="tag" :circle="false" text="社交" :inverted=selected[3] type="default" @click="selectType(4)"/>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view style="margin-top: 27%;">
			<uni-list v-for="activity in activityList" >
				<uni-list-item>
					<template v-slot:body>
						<uni-card :title=activity.title :subTitle=activity.type padding="10px 0" margin="0px 0">
							<template v-slot:cover>
								<image style="left:20% width: 386px; height: 200px" mode="aspectFit" :src="activity.pic"></image>
							</template>
								<text>{{activity.info}}</text>
						</uni-card>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<view>
			<uni-load-more :status=status @clickLoadMore="loadMore"></uni-load-more>
		</view>
		<uni-fab horizontal="right" :content="fabContent" @trigger="fabClick" vertical="bottom"/>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				activityList:[
					
				],
				fabContent:[
					{
						iconPath: '/static/发布.png',
						selectedIconPath: '/static/发布.png',
						text: '发布活动',
						active: false
					}, 
					{
						iconPath: '/static/默认顺序.png',
						selectedIconPath: '/static/默认顺序2.png',
						text: '默认顺序',
						active: true
					}, 
					{
						iconPath: '/static/时间升序.png',
						selectedIconPath: '/static/时间升序2.png',
						text: '时间升序',
						active: false
					}, 
					{
						iconPath: '/static/时间降序.png',
						selectedIconPath: '/static/时间降序2.png',
						text: '时间降序',
						active: false
					}, 
					{
						iconPath: '/static/人数升序.png',
						selectedIconPath: '/static/人数升序2.png',
						text: '人数升序',
						active: false
					}, 
					{
						iconPath: '/static/人数降序.png',
						selectedIconPath: '/static/人数降序2.png',
						text: '人数降序',
						active: false
					}, 
					
				],
				status:"",
				selected:[
					false,
					false,
					false,
					false
				],
				type:"",
				pageNum:1,
				pageSize:5,
				keyword:"",
				end:false,
				token:"eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhMTEyMyIsImV4cCI6MTY3MDQ0MTg0MiwiaWF0IjoxNjcwNDIzODQyfQ.3UBHB24qYdNfJtMzN9e2s27X4IpHDFn2s3OeYQ6e0cvI5pRLTPXx9hQVejJGD28XSGBEX4XZKcOJkobr-imIsg",
				count:0,
				id:1,
				orderBy:"",
				sequence:false
			}
		},
		onPullDownRefresh(){
			this.clear();
			this.searchActivity();
		},
		onLoad(){
			this.searchActivity();
		},
		methods: {
			cancelSearch(){
				this.keyword = "";
				this.newSearch()
			},
			fabClick(e){
				if(e.index == 0){
					//发布活动
					uni.navigateTo({
						url:"/pages/putActivity/putActivity?id="+this.id
					})
				}
				else{
				this.fabContent[e.index].active = !e.item.active
				let Default = true;
				let orderBy = 1;
				for(let i =1;i<this.fabContent.length;i++){
					if(i != e.index)
					this.fabContent[i].active = false;
				}
				for(let i =1;i<this.fabContent.length&&Default;i++){
					if(this.fabContent[i].active == true){
						Default = false;
					}
				}
				if(Default){
					this.fabContent[1].active = true;
				}
				
				for(let i =1;i<this.fabContent.length;i++){
					if(this.fabContent[i].active == true){
						orderBy = i;
						break;
					}
				}
				
				switch(orderBy){
					case 1:this.orderBy = "";
					case 2:this.orderBy = "begin_time";this.sequence = true;break;
					case 3:this.orderBy = "begin_time";this.sequence = false;break;
					case 4:this.orderBy = "added_times";this.sequence = true;break;
					case 5:this.orderBy = "added_times";this.sequence = false;break;
				}
					this.newSearch();
				}
			},
			newSearch(){
				this.clear();
				this.searchActivity()
			},
			searchActivity(){
				uni.request({
					method:'GET',
					url:'http://localhost:8080/activity',
					header:{
						Authorization : "Bearer " +this.token,
					},
					data:{
						'pageNum':this.pageNum,
						'pageSize':this.pageSize,
						'keyword':this.keyword,
						'type':this.type,
						'orderBy':this.orderBy,
						'sequence':this.sequence,
						'byUsername':false,
						'state':12
					},			
					success: (res) => {
						console.log(res);
						let activities = res.data.records;
						let size =activities.length;
						for(let i =0;i<size;i++,this.count++){
							this.activityList.push({
								"id":activities[i].id,
								"title":activities[i].name,
								"info":activities[i].info,
								"type":activities[i].type,
								"pic":activities[i].pic1
							});
						}
						if(size<this.pageSize){
							this.end = true;
							this.status = "no-more";
						}
						uni.stopPullDownRefresh()
					},
				})
			},
			loadMore(){
				if(this.end)return;
				this.pageNum += 1;
				this.searchActivity();
			},
			selectType(number){
				if(this.selected[number-1]){
					this.selected[number-1]=false;
					this.type="";
				}
				else{
					for(let i =1;i<=4;i++){
						if(i==number){
							this.selected[i-1]=true; 
							switch(number){
								case 1:this.type="文体";break;
								case 2:this.type="竞赛";break;
								case 3:this.type="学术";break;
								case 4:this.type="社交";break;
							}
						}
						else{
							this.selected[i-1]=false;
						}
					}
				}
				this.clear();
				this.searchActivity();
			},
			clear(){
				this.end = false,
				this.status="more",
				this.pageNum=1,
				this.count=0,
				this.activityList = []
				
			},
			putActivity(){
				uni.navigateTo({
					url:"/pages/putActivity/putActivity?id=1"
				})
			}
		}
	}
</script>

<style>
	
	.tag{
		line-height: 50px;
		font-size: 27px;
		font-weight: 200;
		padding: 4px 7px;
		border-width: 0rem;
	}

</style>
